<template>
  <div class="page-projects">
    <h2 class="section-title">我的项目</h2>
    <div class="projects-grid">
      <div 
        v-for="(project, index) in projects" 
        :key="index" 
        class="project-card"
        @mouseenter="hoverIndex = index"
        @mouseleave="hoverIndex = null"
      >
        <div class="project-image" :style="{ backgroundImage: `url(${project.image})` }">
          <div class="project-overlay" :class="{ active: hoverIndex === index }">
            <h3>{{ project.title }}</h3>
            <p>{{ project.description }}</p>
            <a :href="project.link" target="_blank" class="project-link">查看详情</a>
          </div>
        </div>
        <div class="project-tech">
          <span v-for="(tech, i) in project.technologies" :key="i">{{ tech }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const hoverIndex = ref(null)

const projects = ref([
  {
    title: '个人博客系统',
    description: '基于Vue3和Node.js的全栈博客系统',
    technologies: ['Vue3', 'Node.js', 'MongoDB'],
    image: 'https://via.placeholder.com/400x225/ff9eb5/ffffff?text=Blog+Project',
    link: '#'
  },
  {
    title: '电商平台前端',
    description: '响应式电商平台前端实现',
    technologies: ['Vue3', 'Pinia', 'TypeScript'],
    image: 'https://via.placeholder.com/400x225/ffd3d3/ffffff?text=E-commerce',
    link: '#'
  },
  {
    title: '数据分析仪表盘',
    description: '实时数据可视化分析工具',
    technologies: ['D3.js', 'Express', 'WebSocket'],
    image: 'https://via.placeholder.com/400x225/ffb6c1/ffffff?text=Dashboard',
    link: '#'
  },
  {
    title: '移动端天气应用',
    description: '基于地理位置的天气预测应用',
    technologies: ['React Native', 'Redux', 'API'],
    image: 'https://via.placeholder.com/400x225/ffc0cb/ffffff?text=Weather+App',
    link: '#'
  }
])
</script>

<style scoped>
.page-projects {
  background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
  height: 100%;
  padding: 0.9rem;
  overflow-y: auto;
}

.section-title {
  font-size: 0.5rem;
  text-align: center;
  margin-bottom: 0.9rem;
  color: white;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -0.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 0.06rem;
  background: #ff9eb5;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.6rem;
  padding: 0 0.3rem;
}

.project-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.3rem;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(0.3rem);
  border: 0.03rem solid rgba(255, 255, 255, 0.1);
}

.project-card:hover {
  transform: translateY(-0.15rem);
  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.2);
}

.project-image {
  height: 2rem;
  background-size: cover;
  background-position: center;
  position: relative;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-overlay.active {
  opacity: 1;
}

.project-overlay h3 {
  font-size: 0.45rem;
  margin-bottom: 0.15rem;
  color: #ff9eb5;
}

.project-overlay p {
  font-size: 0.3rem;
  text-align: center;
  margin-bottom: 0.15rem;
}

.project-link {
  font-size: 0.3rem;
  color: white;
  text-decoration: none;
  border: 0.03rem solid #ff9eb5;
  padding: 0.09rem 0.18rem;
  border-radius: 0.15rem;
  transition: all 0.3s ease;
}

.project-link:hover {
  background: #ff9eb5;
  color: black;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.3rem;
}

.project-tech span {
  font-size: 0.24rem;
  background: rgba(255, 158, 181, 0.2);
  color: #ff9eb5;
  padding: 0.09rem 0.15rem;
  border-radius: 0.15rem;
}
</style>